<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table {
      float: left;
      padding: 15px 15px 15px 15px;
      display: block;
      height: 240px;
    }

    th {
      background: #eee;
      color: rgb(226, 185, 185);
    }

    td {
      color: #333;
    }
  </style>
  <body>
  <script>
    var year = parseInt(prompt("输入年份："));
    document.write(calendar(year));
    function calendar(y) {

      var html = '';

      for (var m = 1; m <= 12; ++m) {
        html += '<table>';
        html += '<tr><th colspan="7">' + y + '年' + m + '月</th></tr>';
        html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';

        // 获取每个月份共有多少天
        var max = new Date(y, m, 0).getDate();

        // 从该月份第一天遍历到最后一天
        for (var d = 1; d <= max; ++d) {

          // 获取指定日期的星期值
          var w = new Date(y, m - 1, d).getDay();

          if (d == 1) {
            // 一个月第一天就是一行
            html += '<tr>';
          }

          // 逢周日是分行开始
          if (d != 1 && w == 0) {
            html += '<tr>'
          }

          // 第一天不是周日时，插入空白
          if (d == 1 && w != 0) {
            html += '<td colspan="' + w + '"></td>'
          }

          html += '<td >' + d + '</td>';

          // 逢周六分行结束
          if (w == 6) {
            html += '</tr>'
          }
        }

        html += '</table>';

      }
      return html;
    }

  </script>
  </body>

</html>